<template>
	<view class="">
		<view class="username">
			<view class="itemTitle">
				收货人：
			</view>
			<input type="text" v-model="username" placeholder="收货人姓名" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">
				
			</view>
			<text :class="{sexActive:sex==0}" @click="sexChange(0)">先生</text>
			<text :class="{sexActive:sex==1}" @click="sexChange(1)">女士</text>
		</view>
		<view class="addressItem">
			<view class="itemTitle">电话号码：</view>
			<input type="text" v-model="telphone" placeholder="请输入电话号码" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">收货地址：</view>
			<pickerAddress class="city" @change="change">{{city}}</pickerAddress>
		</view>
		
		<view class="addressBox">
			<view class="itemTitle">详细地址：</view>
			<textarea v-model="address" placeholder="请输入详细地址" />
		</view>
	<!-- 	默认选择开关 -->
		<view class="defaultItem">
			<view class="itemTitle">默认地址：</view>
			<switch checked="true" color="#0bbbef" style="transform:scale(0.7)" @change="defaultChange" />
		</view>
		
	<!-- 	保存地址 -->
	<view class="saveAddress" @click="addAddress">
		保存收货地址
	</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	import {request} from 'utils/require.js'
	export default{
		data(){
			return{
				city:'请选择收货地址',
				username:'',
				telphone:'',
				address:'',
				default:1,
				sex:0
			}
		},
		components:{
			pickerAddress
		},
		// onLoad(){
		// 	this.addAddress()
		// },
		methods:{
			sexChange(index){
				this.sex = index
			},
			defaultChange(e){
				console.log(e.target.value)
				if(e.target.value == true){
					this.default = 1
				}else{
					this.default = 0
				}
				
			},
			change(data){
				this.city = data.data.join('')
				console.log(data.data.join(''))
			},
			addAddress(){
				//验证表单
				if(!this.check.username(this.username)){return;}
				if(!this.check.telphone(this.telphone)){return;}
				if(!this.check.city(this.city)){return}
				if(!this.check.address(this.address)){return}
				
				//这里request里面传的第一个参数url 第二个参数为一个对象
				request('/member/addressAdd',{
					username:this.username,
					telphone:this.telphone,
					city:this.city,
					address:this.address,
					default:this.default,  //0表示不默认，1表示默认
					sex:this.sex		//0表示显示， 1表示女士
				}).then((res)=>{
					console.log(res)
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
			}
		},
	}
</script>

<style>
	.username{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
	}
	.itemTitle{
		width: 150rpx;
		font-size: 28rpx;
	}
	.username input{
		border-bottom: 1rpx solid #e5e5e5;
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
	}
	.addressItem{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressItem text{
		width: 80rpx;
		height: 45rpx;
		display: block;
		border: 1rpx solid #e5e5e5;
		font-size: 24rpx;
		/* margin-right: 10rpx; */
		text-align: center;
		color: #999;
		line-height: 45rpx;
	}
	.addressItem text.sexActive{
		background: #0bbbef;
		color: #fff;
		border: none;
	}
	.addressBox{
		margin: 0 30rpx;

		height: 180rpx;
		display: flex;
/* 		align-items: center; */
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressBox .itemTitle{
			width: 150rpx;
			line-height: 90rpx;
			font-size: 24rpx;
	}
	.addressBox textarea{
		flex: 1;
		height: 180rpx;
		line-height: 90rpx;
	}
	.saveAddress{
		width: 600rpx;
		margin: 80rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		letter-spacing: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background: #0bbbef;
		border-radius: 80rpx;
	}
	.city{
		font-size: 28rpx;
		color: #000;
	}
	.defaultItem{
		margin: 0 30rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
</style>
